<!DOCTYPE html>
<html>
<head>
	<title>粽情端午</title>
	<meta charset="utf-8">
	<style type="text/css">

	/*动画样式定义*/
	@-webkit-keyframes rock{
		0%{ transform:rotate(0deg)}
		10%{ transform:rotate(3deg)}
		20%{transform:rotate(-3deg)}
		30%{transform:rotate(2deg)}
		40%{transform:rotate(-2deg)}
		50%{transform:rotate(1deg)}
		60%{transform:rotate(-1deg) }
		70%{transform:rotate(0deg) }
		100%{transform:rotate(0deg) }
	}


	*{
		padding:0;
		margin: 0;
	}
	body{
		background: #000;
		min-width: 1200px;
		min-height: 600px;
		-webkit-font-smoothing:antialiased;
		font-family: 'WenQuanYi Micro Hei',SimSun,sans-serif;
		/*background:url(img/bg.jpg) no-repeat;*/
	}
	/*.main{width: 980px; height: 600px; margin:auto; background: url(img/bg.jpg) no-repeat;}*/
	.main{
		width: 1200px;
		height: 600px;
		background: #000 url(./img/bg.jpg);
		position: absolute;/*漂浮特效*/
		left: 50%;
		top:50%;
		margin-left: -600px;
		margin-top: -300px;
		overflow: hidden;
	}

	/*粽子盒子，包含内部元件*/
	.c_zongzi_box{
		width: 312px;
		height: 305px;
		/*background: url(img/zz.png);*/
		position: absolute;
		left: 700px;
		top: 184px;
	}
	.c_zongzi_box_rock{
		-webkit-animation:rock 2s infinite;
	}
	/*粽子*/
	.c_zongzi{
		width: 312px;
		height: 305px;
		background: url(img/zz.png);
		transition:all 1s;
	}
	.c_zongzi_out{
		transform:scale(.5);
		opacity: 0;
	}
	/*绳子*/
	.c_shengzi_1{
		width: 218px;
		height: 180px;
		background: url(img/line_1.png);
		position: absolute;
		left: 10px;
		top:120px;
		z-index: 999;
		cursor:pointer;
	}
	.c_shengzi_2{
		width: 219px;
		height: 159px;
		background: url(img/line_2.png);
		position: absolute;
		left: 10px;
		top:158px;
	}
	.c_shengzi_3{
		width: 264px;
		height: 117px;
		background: url(img/line_3.png);
		position: absolute;
		left: 10px;
		top:220px;
	}
	.c_shengzi_4{
		width: 288px;
		height: 56px;
		background: url(img/line_4.png);
		position: absolute;
		left: 10px;
		top:290px;
	}
	.c_shengzi_0{
		display: none;
	}

	/*粽子肉*/
	.c_zongzirou{
		width: 288px;
		height: 206px;
		background: url(./img/zzr_1.png);
		background-size: 288px 206px;
		position: absolute;
		left: 50px;
		top:54px;
		z-index: 101;
		opacity: 0;
		transform-origin:top center;
		transition:all 1s;/*使透明隐藏和出现出现过渡渐变*/
		transform:scale(.8);
	}
	.c_zongzirou_in{
		opacity: 1;
		transform:scale(1);
	}

	/*左叶*/
	.c_zuoye{
		width: 114px;
		height: 266px;
		background: url(./img/leaf_left.png);
		position: absolute;
		left: 20px;
		top:-50px;
		z-index: 1;
		opacity: 0;
		transform-origin:left bottom;
		transition:all 1s;
	}
	.c_zuoye_in{
		opacity: 1;
		transform:rotate(-5deg);
	}
	.c_zuoye_out{
		opacity: 0;
		transform:rotate(-15deg);
	}
	/*右叶*/
	.c_youye{
		width: 318px;
		height: 338px;
		background: url(img/leaf_right.png);
		position: absolute;
		left: 90px;
		top:-80px;
		z-index: 111;
		transform-origin:left bottom;
		opacity: 0;
		transition:all 1s;
		transform: scale(.8);
	}
	.c_youye_in{
		opacity: 1;
		transform:rotate(5deg) scale(.8);
	}
	.c_youye_out{
		opacity: 0;
		transform:rotate(15deg) scale(.8);
	}

	/*底叶*/
	.c_diye{
		width: 618px;
		height: 468px;
		background: url(img/leaf_expand.png);
		position: absolute;
		left: -150px;
		top:-60px;
		z-index: 99;
		opacity: 0;
		transition:all 1s;
	}
	.c_diye_in{
		opacity: 1;
	}
	/*字1*/
	.c_t_1{
		width: 180px;
		height: 100px;
		background: url(img/t_jixiang.png);
		position: absolute;
		left: 50%;
		top:50%;
		margin-left: -70px;
		margin-top: -50px;
		z-index: 200;
		transform-origin:center center;
		transform:scale(.8);
		opacity: 0;
		transition:all 1s;
	}
	.c_t_in{
		opacity: 1;
	}
	/*字2*/
	.c_t_2{
		width: 180px;
		height: 100px;
		background: url(img/t_ruyi.png);
		position: absolute;
		left: 50%;
		top:50%;
		margin-left: -70px;
		margin-top: -50px;
		z-index: 200;
		transform-origin:center center;
		transform:scale(.8);
		opacity: 0;
		transition:all 1s;
	}
	.c_t_in{
		opacity: 1;
	}

	/*祝福语文字*/
	.text{
		position: absolute;
		width: 400px;
		height:370px;
		left: 180px;
		top: 140px;
		font-size: 14px;
		line-height: 20px;
		color: #333;
	}
	.text_in{
	}
	.text .caption_rock{
		width: 400px;
		height: 240px;
		background: url(img/caption.png) no-repeat;
		margin-left: 40px;
		opacity: 0;
		transition:all 1s;
	}
	.text .caption{
		/*重新定义*/
		-webkit-animation:rock 4s infinite;
	}
	.text .to{
		width: 400px;
		margin-top: 10px;
		margin-left: 40px;
		opacity: 0;
		transition:all 1s .5s;
	}
	.text .msg{
		width: 400px;
		margin-top: 10px;
		margin-left: 40px;
		opacity: 0;
		transition:all 1s 1s;
	}
	.text .from{
		width: 400px;
		margin-top: 10px;
		margin-left: 40px;
		text-align: right;
		opacity: 0;
		transition:all 1s 1.5s;
	}
	.text_in .caption,
	.text_in .to,
	.text_in .msg,
	.text_in .from{
		opacity: 1;
		margin-left: 0px;
	}
	/*粽子肉旋转视角*/
	.c_zongzirou_view_1{
		transition:all 0s;
		background-image: url(img/zzr_1.png);
	}
	.c_zongzirou_view_2{
		transition:all 0s;
		background-image: url(img/zzr_2.png);
	}
	.c_zongzirou_view_3{
		transition:all 0s;
		background-image: url(img/zzr_3.png);
	}
	.c_zongzirou_view_4{
		transition:all 0s;
		background-image: url(img/zzr_4.png);
	}
	.c_zongzirou_view_0{
		transition:all 0s;
		background-image: url(img/zzr_1.png);
		transform:rotateY(180deg);
	}

	/*文字视角*/
	/*
	.c_t_view_1{
		transform:scale(.8) rotateY(30deg) translate(-50px, 0) rotate(8deg);
	}
	.c_t_view_2{
		transform:scale(.7) rotateY(70deg) translate(283px, -15) rotate(-8deg);
	}
	.c_t_view_3{
		transform:scale(.75) rotateY(49deg) translate(-94px, 0) rotate(15deg);
	}
	.c_t_view_4{
		transform:scale(.75) rotateY(47deg) translate(118px, 0) rotate(-15deg);
	}
	.c_t_view_5{
		transform:scale(.6) rotateY(50deg) translate(-196px, 0) rotate(24deg);
	}
	.c_t_view_6{
		transform:scale(.8) rotateY(30deg) translate(58px, 0) rotate(-5deg);
	}
	.c_t_view_7{
		transform:scale(.8) rotateY(30deg) translate(-50px, 0) rotate(8deg);
	}
	*/



	.c_t_view_0{
		transition:all 0s;
		transform:scale(.8);
	}
	.c_t_mirror_0{
		transition:all 0s;
		display: none;
	}

	.c_t_view_2{
		transition:all 0s;
		transform:scale(.8) rotateY(30deg) translate(-50px, 0) rotate(8deg);
	}
	.c_t_mirror_2{
		transition:all 0s;
		transform:scale(.7) rotateY(70deg) translate(283px, -15px) rotate(-8deg);
	}

	.c_t_view_3{
		transition:all 0s;
		transform:scale(.75) rotateY(49deg) translate(-94px, 0) rotate(15deg);
	}
	.c_t_mirror_3{
		transition:all 0s;
		transform:scale(.8) rotateY(49deg) translate(118px, 0) rotate(-15deg);
	}

	.c_t_view_4{
		transition:all 0s;
		transform:scale(.6) rotateY(50deg) translate(-196px, 10px) rotate(24deg);
	}
	.c_t_mirror_4{
		transition:all 0s;
		transform:scale(.8) rotateY(30deg) translate(58px, 10px) rotate(-5deg);
	}
	</style>
</head>
<body>
	<div class="main">
		<div class="c_zongzi_box c_zongzi_box_rock" id="c_zongzi_box">
			<div class="c_zongzi" id="c_zongzi"></div>
			<div class="c_shengzi_1" id="c_shengzi"></div>

			<div class="c_zongzirou" id="c_zongzirou"></div>
			<div class="c_zuoye" id="c_zuoye"></div>
			<div class="c_youye" id="c_youye"></div>
			<div class="c_diye" id="c_diye"></div>

			<div class="c_t_1" id="c_t_1"></div>
			<div class="c_t_2" id="c_t_2"></div>
		</div>

		<div class="text" id="text">
			<div class="caption" id="caption"></div>
			<div class="to">小伙伴们：</div>
			<div class="msg">端午节到了，送大家一个粽子，祝大家端午节快乐！一定要天天开心哦！</div>
			<div class="from">小曾</div>
		</div>
	</div>
	<script type="text/javascript">
		//获取dom对象
		var g=function(id){
			return document.getElementById(id);
		}
		//时间轴对象构造器
		var TimeLine=function(){
			this.order=[];
			this.add=function(timeout,func,log){
				this.order.push({
					timeout:timeout,
					func:func,
					log:log,
				});
			}
			//支持快进
			this.start=function(ff){
				for(s in this.order){
					(function(me){
						var fn=me.func;
						var timeout=me.timeout;
						var log=me.log;
						timeout=Math.max(timeout-(ff||0),0);
						setTimeout(fn,timeout);
						setTimeout(function(){
							console.log('time->',timeout,'log->',log);
						},timeout)
					})(this.order[s])
				}
			}
		}
		//var s=new TimeLine();
		/*
		s.add(1000,function(){
			console.log('first')
		},'int')
		s.add(3500,function(){
			console.log('sec')
		},'int')
		s.start()
		*/

		//初始场景
		var s1=new TimeLine();
		//粽子展开场景
		var s2=new TimeLine();
		//粽子旋转场景
		var s3=new TimeLine();
		s1.add(1,function(){
			g('c_zongzi_box').className='c_zongzi_box c_zongzi_box_rock';

			g('c_shengzi').onclick=function(){
				s2.start();
				g('c_shengzi').onclick=function(){}
			}
		})
		//定义粽子展开动画
		s2.add(1,function(){
			g('c_zongzi_box').className='c_zongzi_box';
			g('text').className='text text_in rock';
		})
		s2.add(100,function(){
			g('c_shengzi').className='c_shengzi_2';
		})
		s2.add(500,function(){
			g('c_shengzi').className='c_shengzi_3';
		})
		s2.add(1000,function(){
			g('c_shengzi').className='c_shengzi_4';
			g('caption').className='caption caption_rock';
		})
		s2.add(1500,function(){
			g('c_shengzi').className='c_shengzi_0';
		})

		s2.add(2000,function(){
			g('c_zongzi').className='c_zongzi c_zongzi_out';
			g('c_zongzirou').className='c_zongzirou c_zongzirou_in';
			g('c_zuoye').className='c_zuoye c_zuoye_in';
			g('c_youye').className='c_youye c_youye_in';

			g('c_t_1').className='c_t_1 c_t_in';
			g('c_t_2').className='c_t_2 c_t_mirror_0';
		})

		s2.add(3000,function(){
			g('c_zuoye').className='c_zuoye c_zuoye_in c_zuoye_out';
			g('c_youye').className='c_youye c_youye_in c_youye_out';
			g('c_diye').className='c_diye c_diye_in';
			s3.start();
		})

		//粽子肉托盘旋转动画
		s3.add(1000,function(){
			g('c_zongzirou').className='c_zongzirou c_zongzirou_in c_zongzirou_view_1';
		})

		s3.add(1200,function(){
			g('c_zongzirou').className='c_zongzirou c_zongzirou_in c_zongzirou_view_2';
			g('c_t_1').className='c_t_1 c_t_in c_t_view_2';
			g('c_t_2').className='c_t_2 c_t_in c_t_mirror_2';
		})

		s3.add(1400,function(){
			g('c_zongzirou').className='c_zongzirou c_zongzirou_in c_zongzirou_view_3';
			g('c_t_1').className='c_t_1 c_t_in c_t_view_3';
			g('c_t_2').className='c_t_2 c_t_in c_t_mirror_3';
		})

		s3.add(1600,function(){
			g('c_zongzirou').className='c_zongzirou c_zongzirou_in c_zongzirou_view_4';
			g('c_t_1').className='c_t_1 c_t_in c_t_view_4';
			g('c_t_2').className='c_t_2 c_t_in c_t_mirror_4';
		})

		s3.add(1800,function(){
			g('c_zongzirou').className='c_zongzirou c_zongzirou_in c_zongzirou_view_0';
			g('c_t_1').className='c_t_1 c_t_in c_t_mirror_0';
			g('c_t_2').className='c_t_2 c_t_in c_t_view_0';
		})

		s3.add(3000,function(){
			g('c_zongzirou').className='c_zongzirou c_zongzirou_in c_zongzirou_view_4';
			g('c_t_1').className='c_t_1 c_t_in c_t_view_4';
			g('c_t_2').className='c_t_2 c_t_in c_t_mirror_4';
		})

		s3.add(3200,function(){
			g('c_zongzirou').className='c_zongzirou c_zongzirou_in c_zongzirou_view_3';
			g('c_t_1').className='c_t_1 c_t_in c_t_view_3';
			g('c_t_2').className='c_t_2 c_t_in c_t_mirror_3';
		})

		s3.add(3400,function(){
			g('c_zongzirou').className='c_zongzirou c_zongzirou_in c_zongzirou_view_2';
			g('c_t_1').className='c_t_1 c_t_in c_t_view_2';
			g('c_t_2').className='c_t_2 c_t_in c_t_mirror_2';
		})

		s3.add(3600,function(){
			g('c_zongzirou').className='c_zongzirou c_zongzirou_in c_zongzirou_view_1';
			g('c_t_1').className='c_t_1 c_t_in c_t_view_0';
			g('c_t_2').className='c_t_2 c_t_in c_t_mirror_0';
		})

		s3.add(5000,function(){
			//循环执行旋转
			s3.start();
		})



		//s1.start();
		//s2.start();

		//图片加载器，实现预加载
		var imgs=['img/zzr_2.png','img/zzr_3.png','img/zzr_4.png'];
		var imgs_onload=function(){
			imgs.pop();
			if(imgs.length==0){
				s1.start();
			}
		}
		for(s in imgs){
			var img=new Image;
			img.onload=imgs_onload;
			img.src=imgs[s];
		}
	</script>
</body>
</html>